<!--主页-->
<template>
  <div>
    <el-row :gutter="2" style="margin-top: -2%">
      <el-col :span="6">
        <el-card style="width: 100%;height: 650px">
          <el-row style="margin-top: -8%">
            <el-col :span="8">
              <span style="font-size: 20px;margin-left: -30px">设备树</span>
<!--              <el-button @click="myEcharts">开始绘图</el-button>-->
<!--              <el-button @click="stop">停止绘图</el-button>-->
            </el-col>
          </el-row>
          <el-row>
            <el-tree :data="data"
                     :props="defaultProps"
                     @node-click="startGetData"
            ></el-tree>

          </el-row>
        </el-card>
      </el-col>


      <el-col :span="18">

        <el-card style="width: 100%;height: 100%">
          <el-row>
          </el-row>
          <el-row style="margin-top: 1%">
            <div id="predictChartLineBox" style="width: 900px;height: 900px;"></div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>

  import * as echarts from 'echarts/index';
  import {getPredictData} from "../../api/predict";

  export default {
    name: "Predict",

    data() {
      return {
        // initialValue:[700,700,700,700,700,700,700,0,0,0],
        initialValue: Array( 10 ).fill( 0 ),
        xAxisDate:[],
      internalId:0,
        allDate:[],
        historyDate:[],
        historyValue:[],
        predictDate:[],
        predictValue:[],
        queryList: [],
        data: [{
          label: '测点',
          children: [{
            id: 3,
            label: '炉膛温度',

          },]
        },],

        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
watch:{
  predictValue:{
    immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了
    handler(newValue,oldValue){
      this.myEcharts();
    }
      // this.fullName = newValue + '-' + this.lastName
    }
},
    mounted() {
this.predict();
      // this.queryList = [
      //   "/Project_XCYW/60dadfcfba3fd02979895e87",//炉膛负压
      //   "/Project_XCYW/60dadfcfba3fd02979895d78",//热风风量
      //   "/Project_XCYW/60dadfcfba3fd02979895e55",//炉膛温度
      //   "/Project_XCYW/60dadfcfba3fd02979895e26",//热风温度
      //   "/Project_XCYW/60dadfcfba3fd02979895ee4",//1供浆流量
      //   "/Project_XCYW/60dadfcfba3fd02979895eb9",//2供浆流量
      //   "/Project_XCYW/60dadfcfba3fd02979895e52",//燃烧器进风压力
      // ];
    },

    methods: {
      myEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('predictChartLineBox'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['历史数据', '预测数据']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',

            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value',
            min:0,
            max:2000,
          },
          series: [
            {
              name: '历史数据',
              type: 'line',
              data: []
            },

            {
              name: '预测数据',
              type: 'line',
              data: []
            }
          ]
        };


        //装入数据
        this.getDrawData();
        option.series[0].data =  this.historyValue;
        option.series[1].data =  this.predictValueAddzero;
        // option.xAxis[0].data = this.historyDate;
        // option.xAxis[1].data = this.predictDate;
        //  this.predictDate = [...initialData,...this.predictDate]
        // this.xAxisDate = this.historyDate;
        // this.xAxisDate.push(this.predictDate[this.predictDate.length-1]);
        option.xAxis.data = this.xAxisDate;
        console.log("整个X轴",this.xAxisDate);
        // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
      },
    //造出来画图数据
      getDrawData(){
        this.predictValueAddzero = [...this.initialValue,...this.predictValue];
        console.log("加0的预测值",this.predictValueAddzero)
        this.xAxisDate = this.historyDate;
        this.xAxisDate.push(this.predictDate[this.predictDate.length-1]);
      },
      //预测数据
      startGetData(){

      setInterval(this.predict,20000);



      },
// stop(){
//         clearInterval(this.internalId)
// },
      predict() {
        // let param = JSON.stringify(this.queryList);
        let param = {
          "WINDOW_SIZE": 20000,
          "uris": [
            "/Project_XCYW/60dadfcfba3fd02979895e87",
            "/Project_XCYW/60dadfcfba3fd02979895d78",
            "/Project_XCYW/60dadfcfba3fd02979895e55",
            "/Project_XCYW/60dadfcfba3fd02979895e26",
            "/Project_XCYW/60dadfcfba3fd02979895ee4",
            "/Project_XCYW/60dadfcfba3fd02979895eb9",
            "/Project_XCYW/60dadfcfba3fd02979895e52"
          ]
        }

          getPredictData(param).then((res) => {
            if (res) {
              console.log("原始返回数据",res);
              this.predictValue.push(res.data.prediction[0].avg_v);
              var time = new Date(res.data.prediction[0].t);
              // console.log("***********",res.data.result[0].t);
              var newTime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()
              this.predictDate.push(newTime);
              console.log("返回预测数据",this.predictValue);
              console.log("返回预测时间",this.predictDate);
              if(this.historyValue.length == 0){
                for (let i = 0; i <=res.data.data.length-1 ; i++) {
                  this.historyValue.push(res.data.data[i].avg_v) ;
                  var time = new Date(res.data.data[i].t);
                  // console.log("***********",res.data.result[0].t);
                  var newTime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()
                  this.historyDate.push(newTime);
                  // this.initialValue = this.historyValue;
                  // console.log("暂存值",this.initialValue);
                  console.log("返回历史数据",this.historyValue);
                  console.log("返回历史时间",this.historyDate);

                }
              }
              else{
                this.historyValue.push(res.data.data[9].avg_v);
                // this.historyDate.push(res.data.data[9].t);
                var time1 = new Date(res.data.data[9].t);
                // console.log("***********",res.data.result[0].t);
                var newTime1 = time1.getFullYear() + "/" + (time1.getMonth() + 1) + "/" + time1.getDate() + " " + time1.getHours() + ":" + time1.getMinutes() + ":" + time1.getSeconds()
                this.historyDate.push(newTime1);
                console.log("返回历史数据后增的",this.historyValue);
                console.log("返回历史时间后增的",this.historyDate);

              }


            };

          });



      },




    },

  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    float: left;
  }

  .el-col {
    padding: 30px 20px;
  }


</style>
